import React, { Component } from 'react'
import { get } from 'lodash'
import { Card } from 'components/Base'
import { Columns, Column } from '@kube-design/components'
import Table from 'components/Tables/Base'
import styles from './index.scss'

export default class ClusterOverview extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tableData: [
        {
          name: 'dl-project1',
          cpuYL: '0m',
          cpuRemain: 221,
          runTime: 200,
          cpu: 11,
          memory: 1620,
          count: 10,
          coreRate: 10,
          coreYL: 11,
          cpuLimit: 11,
          createTime: '2022-12-29',
        },
        {
          name: 'dl-project2',
          cpuYL: '1m',
          cpuRemain: 222,
          runTime: 201,
          cpu: 12,
          memory: 1621,
          count: 10,
          coreRate: 10,
          coreYL: 11,
          cpuLimit: 11,
          createTime: '2022-12-29',
        },
        {
          name: 'dl-project3',
          cpuYL: '2m',
          cpuRemain: 223,
          runTime: 202,
          cpu: 13,
          memory: 1622,
          count: 10,
          coreRate: 10,
          coreYL: 11,
          cpuLimit: 11,
          createTime: '2022-12-29',
        },
        {
          name: 'dl-project4',
          cpuYL: '3m',
          cpuRemain: 224,
          runTime: 203,
          cpu: 14,
          memory: 1623,
          count: 10,
          coreRate: 10,
          coreYL: 11,
          cpuLimit: 11,
          createTime: '2022-12-29',
        },
        {
          name: 'dl-project5',
          cpuYL: '4m',
          cpuRemain: 225,
          runTime: 204,
          cpu: 15,
          memory: 1624,
          count: 10,
          coreRate: 10,
          coreYL: 11,
          cpuLimit: 11,
          createTime: '2022-12-29',
        },
        {
          name: 'dl-project6',
          cpuYL: '5m',
          cpuRemain: 226,
          runTime: 205,
          cpu: 16,
          memory: 1625,
          count: 10,
          coreRate: 10,
          coreYL: 11,
          cpuLimit: 11,
          createTime: '2022-12-29',
        },
        {
          name: 'dl-project7',
          cpuYL: '6m',
          cpuRemain: 227,
          runTime: 206,
          cpu: 17,
          memory: 1626,
          count: 10,
          coreRate: 10,
          coreYL: 11,
          cpuLimit: 11,
          createTime: '2022-12-29',
        },
      ],
      tableColumn: [
        {
          title: '名称',
          dataIndex: 'name',
          render: v => {
            return (
              <>
                <img
                  style={{
                    width: '30px',
                    height: '30px',
                    marginRight: '10px',
                  }}
                  src="/assets/userPlatform/5.png"
                />
                <span style={{ lineHeight: '30px', verticalAlign: 'top' }}>
                  {v}
                </span>
              </>
            )
          },
        },
        // {
        //   title: 'CPU用量',
        //   dataIndex: 'namespace_memory_usage_wo_cache',
        // },
        // {
        //   title: 'CPU预留',
        //   dataIndex: 'cpuRemain',
        // },
        // {
        //   title: 'CPU限制',
        //   dataIndex: 'cpuLimit',
        // },
        {
          title: '内存用量',
          dataIndex: 'namespace_memory_usage_wo_cache',
        },
        {
          title: '内存预留',
          dataIndex: 'coreYL',
        },
        {
          title: '容器组数量',
          dataIndex: 'namespace_pod_count',
        },
        {
          title: '内存占用(GB)',
          dataIndex: 'memory',
        },
        {
          title: '出站流量',
          dataIndex: 'namespace_net_bytes_transmitted',
        },
        {
          title: '入站流量',
          dataIndex: 'namespace_net_bytes_received',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
        },
      ],
    }
  }

  componentDidMount() {
    this.queryProjectQuotaData()
  }

  queryProjectQuotaData = () => {
    request
      .get(
        '/kapis/clusters/host/monitoring.kubesphere.io/v1alpha3/workspaces/demo-workspace/namespaces?type=rank&metrics_filter=namespace_memory_usage_wo_cache%7Cnamespace_memory_limit_hard%7Cnamespace_cpu_usage%7Cnamespace_cpu_limit_hard%7Cnamespace_pod_count%7Cnamespace_pod_count_hard%7Cnamespace_net_bytes_received%7Cnamespace_net_bytes_transmitted&page=1&limit=10&sort_type=desc&sort_metric=namespace_cpu_usage',
        {}
      )
      .then(res => {
        // const tableData = res.results
        // console.log(res)
        const { results = {} } = res
        const data = []
        results.forEach(i => {
          const val = {}
          if (i?.data?.result?.[0]?.metric) {
            i?.data?.result?.forEach(values => {
              val[values?.metric?.['namespace']] = values?.value?.[1]
            })
            // console.log('val', val)
            data.push({ [i.metric_name]: val })
          }
        })

        const dataList = []

        const serverNameList = Object.keys(
          Object.values(
            data.find(item => item['namespace_memory_usage_wo_cache'])
          )[0]
        )

        console.log(serverNameList)

        serverNameList.forEach(i => {
          dataList.push({
            name: i,
            // type: i.split(':')[0],
          })
        })

        dataList.forEach(i => {
          data.forEach(item => {
            i[Object.keys(item)[0]] = Object.values(item)[0][i.name]
          })
        })

        console.log(data, dataList, 'qqq')
        this.setState(() => ({
          tableData: dataList || [],
        }))
      })
  }

  render() {
    return (
      <Card
        className={styles.groupContainer}
        title="项目配额情况"
        empty={t('NO_LOG_DATA_FOUND')}
      >
        <Columns>
          <Column className="is-narrow is-12">
            <Table
              className={styles.tableHeight}
              hideHeader
              hideFooter
              rowKey="name"
              data={this.state.tableData}
              loading={false}
              columns={this.state.tableColumn}
            />
          </Column>
        </Columns>
      </Card>
    )
  }
}
